<template>
  <div class="add_container">
    <div class="tt_info">
      <div class="tt_group name">
        <div class="title">姓名</div>
        <input type="text" placeholder="请输入姓名" v-model="real_name" />
      </div>
      <div class="tt_group phone">
        <div class="title">联系电话</div>
        <input type="text" placeholder="请输入联系电话" v-model="phone" />
      </div>
      <div class="tt_group address">
        <div class="title">所在地区</div>
        <div class="txt">
          <div class="tt_text" @click="openAddress">{{ address }}</div>
          <van-icon name="location-o" color="#fc4141" />
        </div>
      </div>
      <div class="tt_group detail">
        <div class="title">详细地址</div>
        <input type="text" placeholder="请填写具体地址" v-model="detail" />
      </div>
    </div>
    <div class="set_address" @click="clickDefalut">
      <i :class="is_default == true ? 'active' : ''"></i>设置为默认地址
    </div>
    <div class="save_btn">
      <div class="save" @click="clickEdit">立即保存</div>
    </div>

    <div class="mask" @click="openAddress" v-if="isShow"></div>

    <transition name="shang">
      <!-- <select-address @share-address="getAddress" v-if="isShow"></select-address> -->

      <div class="city_container" v-if="isShow">
        <div class="tt_city">所在地区</div>
        <ul class="tab">
          <li :class="tabIndex == 0 ? 'active' : ''" @click="tabList(0)">
            <span>{{ p }}</span>
          </li>
          <li
            v-if="index != null"
            :class="tabIndex == 1 ? 'active' : ''"
            @click="tabList(1)"
          >
            <span>{{ c }}</span>
          </li>
          <li
            v-if="square != null"
            :class="tabIndex == 2 ? 'active' : ''"
            @click="tabList(2)"
          >
            <span>{{ d }}</span>
          </li>
        </ul>
        <div class="tt_com" ref="comRef">
          <div class="box" :style="`transform:translateX(${distance}px)`">
            <div class="cc_item province" style="background: #fff">
              <ul>
                <li
                  v-for="(item, i) in list"
                  :key="i"
                  @click="clickProvince(item.n, i)"
                  :class="index == i ? 'active' : ''"
                >
                  <span>{{ item.n }}</span>
                  <van-icon
                    class="success_icon"
                    name="success"
                    color="#fc4141"
                  />
                </li>
              </ul>
            </div>
            <div class="cc_item city" style="background: #f5f5f5">
              <ul v-if="isCity">
                <li
                  v-for="(ele, i) in list[index].c"
                  :key="i"
                  @click="clickCity(ele.n, i, list[index].c[i].v)"
                  :class="square == i ? 'active' : ''"
                >
                  <span>{{ ele.n }}</span>
                  <van-icon
                    class="success_icon"
                    name="success"
                    color="#fc4141"
                  />
                </li>
              </ul>
            </div>
            <div class="cc_item detail" style="background: #fff">
              <ul v-if="isDetail">
                <li
                  v-for="(item, i) in list[index].c[square].c"
                  :key="i"
                  @click="clickDetail(item.n, i)"
                  :class="count == i ? 'active' : ''"
                >
                  <span>{{ item.n }}</span>
                  <van-icon
                    class="success_icon"
                    name="success"
                    color="#fc4141"
                  />
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import SelectAddress from "@/views/user/address/SelectAddress.vue";

export default {
  data() {
    return {
      isShow: false,

      list: [],
      index: null, // 省的索引值
      square: null, // 市的索引值
      count: null, // 区的索引值
      tabIndex: 0,

      id: "",
      real_name: "",
      detail: "",
      phone: "",
      detail: "",
      p: "请选择", // 当前选择的省份,
      c: "请选择",
      d: "请选择",
      city_id: 0,
      is_default: false,

      isCity: false,
      isDetail: false,

      distance: 0,
    };
  },
  computed: {
    address() {
      if (this.p == "请选择") {
        return "请选择收货地址";
      }
      return this.p + " " + this.c + " " + this.d;
    },

    addressMes() {},
  },
  created() {
    if (this.$route.params.id) {
      this.getAddressDetail(this.$route.params.id);
    }

    this.initCityData();
  },
  components: {
    SelectAddress,
  },
  methods: {
    getAddress(val) {
      this.addressInfo = val;
    },
    openAddress() {
      this.isShow = !this.isShow;
    },

    initCityData() {
      // console.log("xx")
      let url = "/api/city_list";
      let pro = axios({
        url: url,
        method: "get",
      })
        .then((res) => {
          this.list = res.data.data;
          console.log(res.data);
        })
        .catch((err) => {
          console.log("失败");
        });
    },

    getAddressDetail(id) {
      let token = localStorage.getItem("token");
      let url = `/api/address/detail/${id}`;

      let pro = axios({
        url: url,
        method: "get",
        headers: {
          "Authori-zation": "Bearer " + token,
        },
      })
        .then((res) => {
          // this.id = res.data.data.id;
          let { status, data } = res.data;
          if (status == 200) {
            this.id = data.id + "";
            this.real_name = data.real_name;
            this.phone = data.phone;
            this.detail = data.detail;
            this.is_default = data.is_default;
            this.city_id = data.city_id;
            this.p = data.province;
            this.c = data.city;
            this.d = data.district;
          }
          console.log(res.data);
        })
        .catch((err) => {
          console.log("失败");
        });
    },

    clickProvince(province, i) {
      // this.isFlag = 1;
      this.p = province;
      this.isCity = true;
      this.index = i;
      //   if(this.list)
      this.square = null;

      this.isDetail = false;
      this.tabIndex = 1;

      this.distance = -Math.ceil(this.$refs.comRef.offsetWidth / 2);
    },

    clickCity(City, i, v) {
      this.isDetail = true;
      this.city_id = v;
      this.c = City;
      this.square = i;
      this.count = null;
      this.tabIndex = 2;
    },

    clickDetail(detail, i) {
      this.d = detail;
      this.count = i;
    },

    tabList(i) {
      this.tabIndex = i;
      if (this.tabIndex == 0) {
        this.distance = 0;
      } else if (this.tabIndex == 2) {
        this.distance = -Math.ceil(this.$refs.comRef.offsetWidth / 2);
      }
    },

    // 点击默认
    clickDefalut() {
      this.is_default = !this.is_default;
    },

    // 点击修改
    clickEdit() {
      let token = localStorage.getItem("token");
      let url = "/api/address/edit";
      let data = {
        address: {
          province: this.p,
          city: this.c,
          district: this.d,
          city_id: this.city_id,
        },
        id: this.id,
        detail: this.detail,
        phone: this.phone,
        real_name: this.real_name,
        is_default: this.is_default,
        post_code: "",
      };
      let pro = axios({
        url: url,
        method: "post",
        headers: {
          "Authori-zation": "Bearer " + token,
        },
        data: data,
      })
        .then((res) => {
          // this.id = res.data.data.id
          this.$toast.show("修改成功!", 1000);
          this.$router.push("/user/add_manage");
        })
        
    },
  },
};
</script>

<style lang="scss" scoped>
.add_container {
  .tt_info {
    background-color: #fff;
    margin-bottom: 12px;
    .tt_group:nth-child(1) {
      border-top: 0px;
    }
    .tt_group {
      height: 45px;
      border-top: 1px solid #eee;
      padding: 0 15px;
      display: flex;
      align-items: center;
      .title {
        width: 80px;
        color: #282828;
        font-size: 14px;
      }
      > input {
        flex: 1;
        border: 0;
        outline: none;
        display: block;
        height: 22px;
        font-size: 14px;
      }
    }

    .address {
      .txt {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .tt_text {
          font-size: 16px;
        }
      }
    }
  }

  .set_address {
    height: 45px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    font-size: 16px;
    background-color: #fff;
    i {
      display: inline-block;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 1px solid #ccc;
      margin-right: 8px;
    }

    i.active {
      display: inline-block;

      background: url(../../../assets/icon/common/cart_yes.png) no-repeat;
      background-size: 55% 45%;
      background-position: center center;
      border-radius: 50%;
      background-color: #e93323;
      border-color: #e93323;
    }
  }

  .save_btn {
    margin-top: 25px;
    padding: 0 15px;
    .save {
      background-color: #fc4141;
      color: #fff;
      font-size: 16px;
      height: 43px;
      width: 100%;
      border-radius: 21.5px;
      text-align: center;
      line-height: 43px;
    }
  }
}

.city_container {
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 1000;
  width: 100%;
  .tt_city {
    height: 45px;
    line-height: 45px;
    text-align: center;
    font-size: 15px;
    color: #333;
  }
  .tab {
    padding: 0 15px;
    height: 40px;
    display: flex;

    li {
      height: 40px;
      line-height: 40px;
      padding: 0 12px;

      font-size: 13px;
      margin-right: 10px;
      color: #282828;
    }
    li.active {
      border-bottom: 2px solid #f23030;
      color: #f23030;
    }
  }
  .tt_com {
    width: 100%;
    height: 282px;
    overflow: hidden;
    .box {
      height: 282px;
      display: flex;
      background-color: pink;
      width: 150%;
      transition: all 0.7s ease;
      //   float: left;

      .cc_item::-webkit-scrollbar {
        display: none;
      }
      .cc_item {
        // flex-grow: 0;
        // width:33.3%;
        width: 300px;
        height: 100%;
        background-color: pink;
        overflow-y: auto;
        ul {
          li {
            height: 40px;
            line-height: 40px;
            font-size: 13px;
            color: #333;
            display: flex;
            padding: 0 26px;
            justify-content: space-between;
            align-items: center;

            .success_icon {
              display: none;
            }
          }

          li.active span {
            color: #fc4141;
          }
          li.active .success_icon {
            display: block;
          }
        }
      }
    }
  }
}
</style>
